import React from 'react';
import { Typography, Divider, Layout, Card, Steps } from 'antd';
import MarkdownCodeBlock from '@/components/MarkdownCodeBlock';
import nginxConfCode from '!!raw-loader!./nginx.conf';

const { Title, Paragraph, Text } = Typography;
const { Content } = Layout;

const DeployManager: React.FC = () => {
  return (
    <Layout style={{ padding: '24px', background: '#f5f5f5' }}>
      <Content>
        <div className="deploy-manager" style={{ maxWidth: '900px', margin: '0 auto' }}>
          <Card>
            <Title level={2} style={{ textAlign: 'center', marginBottom: '24px' }}>
              使用 Nginx 部署前端项目完整指南
            </Title>

            <Paragraph style={{ textAlign: 'center', fontSize: '16px' }}>
              本教程将指导您完成 Nginx 的安装、配置和管理，帮助您更好地部署前端项目。
            </Paragraph>

            <Divider orientation="left">快速开始</Divider>

            <Steps
              direction="vertical"
              current={20}
              items={[
                {
                  title: '安装 nginx',
                  description: '使用 Homebrew 包管理器安装 nginx',
                  content: <MarkdownCodeBlock code="brew install nginx" />
                },
                {
                  title: '验证安装',
                  description: '确认 Nginx 安装是否成功',
                  content: <MarkdownCodeBlock code="nginx -v" />
                },
                {
                  title: '打包前端项目',
                  description: '打包前端项目, 执行 `npm run build`, 拿到dist文件夹',
                  content: <MarkdownCodeBlock code="npm run build" />
                },
                {
                  title: '将 dist 文件夹移动到 nginx 目录下 html 文件夹下',
                  description: '将 dist 文件夹移动到 nginx 目录下 html 文件夹下, 如果找不到nginx的目录, 请使用 `brew --prefix nginx` 查看, 会得到类似 /opt/homebrew/opt/nginx 这样的结果, 在这个里面就可以找到html文件夹',
                  content: <MarkdownCodeBlock code="brew --prefix nginx" />
                },
                {
                  title: '修改 nginx 配置, 也就是 nginx.conf 文件',
                  description: '修改 nginx 配置, 当然你也可以不改, 我这里改了配置如下, 我将80端口改成了8000端口',
                  content: <MarkdownCodeBlock code={nginxConfCode} />
                },
                {
                  title: '启动服务',
                  description: '启动 Nginx 服务',
                  content: <MarkdownCodeBlock code="brew services start nginx" />
                },
                {
                  title: '访问项目',
                  description: '访问项目, 打开浏览器, 输入 http://localhost:8000, 就可以看到你的前端项目了, 如果你没有改端口, 请输入 http://localhost',
                  content: <MarkdownCodeBlock code="http://localhost:8000" />
                }
              ].map(item => ({
                ...item,
                description: (
                  <div style={{ margin: '12px 0' }}>
                    <Text>{item.description}</Text>
                    <div style={{ marginTop: '8px' }}>{item.content}</div>
                  </div>
                )
              }))}
            />

            <Divider orientation="left">常用命令参考</Divider>

            <Card title="服务管理" style={{ marginBottom: '16px' }}>
              <Paragraph>
                <Text strong>启动服务：</Text>
                <MarkdownCodeBlock code="brew services start nginx" />
              </Paragraph>

              <Paragraph>
                <Text strong>检查状态：</Text>
                <MarkdownCodeBlock code="brew services info nginx" />
              </Paragraph>

              <Paragraph style={{ marginTop: '16px' }}>
                <Text strong>停止服务：</Text>
                <MarkdownCodeBlock code="brew services stop nginx" />
              </Paragraph>

              <Paragraph style={{ marginTop: '16px' }}>
                <Text strong>重启服务：</Text>
                <MarkdownCodeBlock code="brew services restart nginx" />
              </Paragraph>
            </Card>

            <Card title="配置管理" style={{ marginBottom: '16px' }}>
              <Paragraph>
                <Text strong>测试配置文件：</Text>
                <MarkdownCodeBlock code="nginx -t" />
              </Paragraph>

              <Paragraph style={{ marginTop: '16px' }}>
                <Text strong>查看安装路径：</Text>
                <MarkdownCodeBlock code="brew --prefix nginx" />
              </Paragraph>

              <Paragraph style={{ marginTop: '16px' }}>
                <Text strong>打开安装目录：</Text>
                <MarkdownCodeBlock code="open $(brew --prefix nginx)" />
              </Paragraph>
            </Card>

            <Card title="维护操作">
              <Paragraph>
                <Text strong>卸载 Nginx：</Text>
                <MarkdownCodeBlock code="brew uninstall nginx" />
              </Paragraph>

              <Paragraph style={{ marginTop: '16px' }}>
                <Text strong>清理缓存：</Text>
                <MarkdownCodeBlock code="brew cleanup" />
              </Paragraph>

              <Paragraph style={{ marginTop: '16px' }}>
                <Text strong>重新安装：</Text>
                <MarkdownCodeBlock code="brew install nginx" />
              </Paragraph>
            </Card>
          </Card>
        </div>
      </Content>
    </Layout>
  );
};

export default DeployManager;
